<template>
    <div id="cpSet">
        <div id="modle">
            <el-dialog :title="title" class="dialogAdd" width="600px"   :visible.sync="dialogAddgsVisible"  @close="closeDialogAddgsVisible">
                <el-form :model="addForm" :rules="rules" ref="addForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="创建人:"  prop="createBy">
                        <el-input   placeholder="请输入内容" v-model="addForm.createBy"></el-input>
                    </el-form-item>
                    <el-form-item label="食材:"  prop="goodsClassifyName">
                        <el-input   placeholder="请输入内容" v-model="addForm.goodsClassifyName"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveAddForm">确 定</el-button>
                </div>
            </el-dialog>

        </div>
        <div id="modle1">
            <el-dialog :title="title1"  width="600px"   :visible.sync="dialogAddgsVisible1">
                <el-form :model="xiuForm" :rules="xiuRules" ref="xiuForm" style="margin-right: 20px;" label-position="right" label-width="110px">
                    <el-form-item label="修改人:"  prop="createBy">
                        <el-input   placeholder="请输入内容" v-model="xiuForm.createBy"></el-input>
                    </el-form-item>
                    <el-form-item label="食材:"  prop="goodsClassifyName">
                        <el-input   placeholder="请输入内容" v-model="xiuForm.goodsClassifyName"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="dialogAddgsVisible1 = false">取 消</el-button>
                    <el-button size="mini" type="primary" @click="saveXiuForm">确定修改</el-button>
                </div>
            </el-dialog>

        </div>
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" @click="chaXun1" size="small">查询搜索</el-button>
                <el-button
                        style="float:right;margin-right: 15px"
                        @click="handleResetSearch()"
                        size="small"
                >重置</el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="">
                        <el-select v-model="formInline.region" placeholder="菜名" ref="Option">
                            <el-option label="菜名" value="shanghai"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="搜索内容">
                        <el-input v-model="formInline.user" ref="Title1" placeholder="请输入搜索内容"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" @click="handleSelectProduct()" style="float:right">添加商品</el-button>
        </el-card>
<!--        <div id="souSuo">-->
<!--            <h1>消耗品类型</h1>-->
<!--            <input type="text" id="Title1" placeholder="请输入搜索内容">-->
<!--            <el-button @click="chaXun1">搜索</el-button>-->
<!--            <el-button>添加</el-button>-->
<!--        </div>-->
        <div id="myTable">
            <el-table
                    :data="arrData"
                    border
                    style="width: 100%;height: 278px">
                <el-table-column
                        prop="id"
                        label="编号"
                >
                </el-table-column>
                <el-table-column
                        prop="goodsClassifyName"
                        label="食材"
                >
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="createTime"-->
<!--                        label="创建时间"-->
<!--                >-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="createBy"
                        label="创建人"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button  size="small" @click="xiuGai(scope.$index,scope.row)">修改</el-button>
                        <el-button  size="small" type="danger" @click="delTable1(scope.$index,scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="yeJiao">
                <el-pagination
                        background
                        hide-on-single-page
                        layout="prev,pager,next"
                        :total="xhtypeData.length"
                        :page-size="4"
                        :pager-count="7"
                        :current-page="currentPage"
                        @current-change="currentChange"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
    import $ from 'jquery'
    import axios from '../../http/http'
    export default {
        name: "XHtype",
        data() {
            return {
                xhtypeData: [],
                formInline:{
                    user:"",
                    region:"",
                },
                currentPage: 1,

                addForm:{
                    id:'',
                    goodsClassifyName: '',
                    goodsUnitsName: '',
                    stock: '',
                    createTime:'',
                    createBy:'',
                    updateTime:'',
                    updateBy:''
                },
                xiuForm:{
                    goodsClassifyName:"",
                    createBy:"",
                },
                title1:'',
                dialogAddgsVisible1:false,
                xiuRules: {
                    goodsClassifyName: [
                        {required: true, message: "添加食材", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    createBy: [
                        {required: true, message: "请输入身份证", trigger: "blur"},
                        {min: 1, message: "请输入数字编号", trigger: "blur"}
                    ],
                },
                dialogAddgsVisible:false,
                title:'',
                rules: {
                    goodsClassifyName: [
                        {required: true, message: "添加食材", trigger: "blur"},
                        {min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur"}
                    ],
                    createBy: [
                        {required: true, message: "请输入身份证", trigger: "blur"},
                        {min: 1, message: "请输入数字编号", trigger: "blur"}
                    ],
                }
            }
        },
        created() {
            this.xuanRan()
        },
        computed:{
            arrData(){

                let kaishi=this.currentPage*4-3;
                let jieshu=this.currentPage*4;
                return this.xhtypeData.slice(kaishi-1,jieshu)
            }
        },
        methods:{
            xuanRan(){
                //页面加载，进行渲染
                this.$axios({
                    url:'/mgrsite/Admin/selectDepotGoods',
                    method:'post',
                }).then(res=>{
                    this.xhtypeData=res.data
                })
            },
            //删除数据
            delTable1(index,row){ this.$confirm("删除后不可恢复, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    // 这里发起axios请求（提示删除是否成功）
                    this.$axios({
                        url: "/mgrsite/Admin/deleteGoodsById",
                        method: "post",
                        data: {
                            "id":row.id
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.status === 200) {
                            this.$message({
                                type: "success",
                                message: "删除成功!"
                            });
                            this.xuanRan()
                        } else {
                            this.$message({
                                type: "error",
                                message: "删除失败!"
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });

            },
            //新增按钮，添加商品
            handleSelectProduct(){
                this.dialogAddgsVisible = true;
                this.title="新增"
            },

            //进行重置的方法
            handleResetSearch(){
                this.formInline.user = "";
                this.formInline.region = "";
            },

            //改变当前页的方法
            currentChange(val){
                this.currentPage=val
            },
            //点击搜索按钮的函数
            chaXun1(){
                if(this.formInline.user==''){

                    this.$message({
                        message:'搜索内容不能为空'
                    })
                }else {
                    this.$axios({
                        url:'/mgrsite/Admin/selectDepotGoodsByName',
                        method:'post',
                        data:{
                            "goodsClassifyName":this.formInline.user
                        }
                    }).then(res=>{
                        if(res.data==''){
                            this.$message({
                                type:'warning',
                                message:'您搜索的内容为空，请重新输入!'
                            })
                        }else {
                            this.xhtypeData=res.data;
                        }
                    })
                }
            },
            //当点击取消和确认的时候，模态框里的值全部清空
            closeDialogAddgsVisible(){
                this.$refs.addForm.resetFields();//element封装的方法,清空模态框的值
                this.title="" //初始化title的值
                this.addForm={//初始化addForm中的值
                    createBy:"",
                    goodsClassifyName:"",
                }
            },
            //修改数据
            xiuGai(index,row){
                this.dialogAddgsVisible1 = true;
                this.title1="修改"
                this.xiuForm=row
                console.log(this.xiuForm)
            },
            //保存后保存
            saveAddForm(){
                if (this.addForm.goodsClassifyName == '' || this.addForm.createBy == '') {
                    this.$message({
                        message: '不能为空，请添加数据'
                    })
                } else {
                    this.$axios({
                        url: '/mgrsite/Admin/insertGoods',
                        method: 'post',
                        data: {
                            // goodsUnitsName,goodsClassifyName,stock,supplier,price,createTime,createBy
                            // "delFlag": true,
                            "id": this.addForm.id,
                            "price": this.addForm.price,
                            "goodsClassifyName": this.addForm.goodsClassifyName,
                            "stock": this.addForm.stock,
                            "createBy": this.addForm.createBy,
                            "updateBy": this.addForm.updateBy,
                            "createTime": this.addForm.createTime,
                            "goodsUnitsName":this.addForm.goodsUnitsName,
                        }
                    }).then(res => {
                        this.$message({
                            message: '添加成功'
                        })
                        this.xuanRan()
                    }).catch(error=>{
                        console.log(error)
                    })
                }
            },
            //修改后保存
            saveXiuForm(){
                if(this.xiuForm.goodsId==''||this.xiuForm.mainId==''){
                    this.$message({
                        message:'不能为空，请输入修改数据'
                    })
                }else {
                    this.$message({
                        message:'修改成功'
                    })
                }
            },
        }
    }
</script>

<style scoped lang="less">
    #souSuo{
        text-align: left;
        input{
            height:30px;
            margin-right: 20px;
            width: 300px;
        }
    }
    .operate-container{
        margin: 15px 0;
    }
    .yeJiao{
        position: absolute;
        left: 50%;
    }
</style>